<template>
  <el-drawer
    title="新建"
    :visible.sync="visible"
    :before-close="handleClose"
    :destroy-on-close="true"
    :wrapperClosable="false"
    :size="this.drawerSize"
  >
    <div class="drawer-content">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="moduleName">
          <el-input v-model="form.moduleName"></el-input>
        </el-form-item>
        <el-form-item label="父菜单">
          <el-cascader
            style="width: 100%"
            v-model="form.pId"
            :placeholder="placeholderSelect"
            :options="tableData"
            :props="optionProps"
            clearable
            :show-all-levels="false"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch v-model="form.showFlag" />
        </el-form-item>
        <el-form-item label="是否外链">
          <el-switch v-model="form.isOut" @change="handleOut" />
        </el-form-item>
        <el-form-item label="地址" v-show="outFlag">
          <el-input v-model="form.outHref"></el-input>
        </el-form-item>

        <el-form-item label="排序">
          <el-input v-model="form.mOrder" type="number"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { DRAWER_SIZE, PLEASE_SELECT } from "@/util/constant";
// import { insertUserApi } from "@/api/modules/user.api";
// import { addMenuApi } from "@/api/modules/menu.api";
import { insertNavbarApi } from "@/api/modules/websites/navbar.api";

export default {
  props: ["tableData"],
  data() {
    return {
      visible: false,
      placeholderSelect: PLEASE_SELECT,
      form: {
        moduleName: "",
        mOrder: 1,
        pId: "",
        isOut: true,
        showFlag: true,
        navFlag: 1,
        outHref: "",
      },
      outFlag: true,
      optionProps: {
        value: "moduleId",
        label: "moduleName",
        children: "childList",
        checkStrictly: true,
      },
      drawerSize: DRAWER_SIZE,
      rules: {
        moduleName: [{ required: true, message: "请输入", trigger: "blur" }],
        href: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  methods: {
    init() {
      // console.log("tableData", this.tableData);
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
    },
    async handleAdd() {
      if (Array.isArray(this.form.pId)) {
        this.form.pId = this.form.pId.slice(-1)[0];
      } else {
        this.form.pId = 0;
      }
      this.form.navFlag = 1;
      await insertNavbarApi(this.form);
      this.$message({
        message: "成功",
        type: "success",
      });
      this.form = {
        moduleName: "",
        mOrder: 1,
        pId: "",
        isOut: true,
        showFlag: true,
        navFlag: 1,
        outHref: "",
      };
      this.outFlag = true;
      this.visible = false;
      this.$emit("getParentTableData");
    },
    handleOut(data) {
      this.outFlag = data;
    },
  },
};
</script>
